<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <script src="/js/lib/echarts.min.js"></script>
</head>
<body>
<main class="ui container" id="user">
    <div class="ui segment raised" :class="{loading:!ready}">
        <div class="ui card fluid" v-if="ready">
            <div class="content">
                <div class="ui small right floated statistics">
                    <div class="orange statistic">
                        <div class="value">
                            <i class="ui star outline icon"></i><span v-html="user.userProfile.score"></span>
                        </div>
                        <div class="label">积分</div>
                    </div>
                    <div class="green statistic">
                        <div class="value">
                            <i class="ui check icon"></i>{{user.userProfile.accepted}}
                        </div>
                        <div class="label">通过</div>
                    </div>
                    <div class="blue statistic">
                        <div class="value">
                            <i class="ui paper plane outline icon"></i>{{user.userProfile.submitted}}
                        </div>
                        <div class="label">提交</div>
                    </div>
                </div>
                <div class="header">
                    {{user.id}} -- {{user.name}}
                </div>
                <div class="description">
                    <p>用户名：{{user.username}}</p>
                    <p>个人介绍：{{user.intro}}</p>
                    <p v-if="isOwner()">Email：{{user.email}}</p>
                </div>
            </div>
            <a :href="'/user/edit/'+id" class="ui button attached animated fade bottom" v-if="isOwner()">
                <div class="visible content"><i class="ui edit icon"></i>Update</div>
                <div class="hidden content">更新个人信息</div>
            </a>
        </div>
    </div>
    <div class="ui grid segment center aligned">
        <div style="height:20rem;opacity: 0.8;" id="PieChart" class="eight wide column segment"></div>
        <div style="height:20rem;opacity: 0.8;" id="RadarChart" class="eight wide column segment"></div>
    </div>
</main>
<script>
    pid = location.pathname.split('/');
    pid = pid[pid.length - 1];
    var usr = new Vue({
        el: "#user",
        data: {
            id: parseInt(pid),
            user: {},
            ready: false
        },
        methods: {
            isOwner() {
                return user_bar.user.id == this.id;
            }
        },
        created() {
            var that = this;
            axios.get("/api/user/" + pid)
                .then(function (res) {
                    that.user = res.data;
                    that.ready = true;
                }).catch(function (res) {
                if (res.response.status == 404)
                    location.href = "/4O4";
            });
        }
    });
    var radarChart = echarts.init(document.getElementById("RadarChart"));
    var pieChart = echarts.init(document.getElementById("PieChart"));
    $.get({
        url: "/api/user/pie/" + pid,
        success: function (res) {
            var graph = res;
            if (graph != null) {
                pieoption = {
                    "color": [
                        "#3fb1e3",
                        "#6be6c1",
                        "#626c91",
                        "#a0a7e6",
                        "#c4ebad",
                        "#96dee8"
                    ],
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: ['初级', '中级', '高级', '未通过']
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series: [
                        {
                            name: '题目难度',
                            type: 'pie',
                            avoidLabelOverlap: false,
                            radius: ['50%', '70%'],
                            data: [
                                {value: graph.pie.prime, name: '初级'},
                                {value: graph.pie.medium, name: '中级'},
                                {value: graph.pie.advance, name: '高级'},
                                {value: graph.submit - graph.solve, name: '未通过'}
                            ].sort(function (a, b) {
                                return a.value - b.value;
                            }),
                            roseType: 'radius',
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        color: 'gray',
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    shadowBlur: 200,
                                    shadowColor: 'white'
                                }
                            },
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                };
                radaroption = {
                    title: {
                        text: '能力雷达图',
                        show: false
                    },
                    "color": [
                        "#3fb1e3",
                        "#6be6c1",
                        "#626c91",
                        "#a0a7e6",
                        "#c4ebad",
                        "#96dee8"
                    ],
                    tooltip: {},
                    radar: {
                        indicator: [
                            {name: '数据结构', max: 100},
                            {name: '图论', max: 100},
                            {name: '动态规划', max: 100},
                            {name: '搜索', max: 100},
                            {name: '计算几何', max: 100},
                            {name: '字符串', max: 100},
                            {name: '数论', max: 100},
                            {name: '概率论', max: 100}
                        ],
                        startAngle: 90,
                        shape: 'circle',
                        splitNumber: 5,
                        name: {
                            textStyle: {
                                color: '#666666'
                            }
                        }
                    },
                    series: [
                        {
                            name: '能力值',
                            type: 'radar',
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    opacity: 0.5
                                }
                            },
                            "symbolSize": "8",
                            "symbol": "emptyCircle",
                            "smooth": false,
                            data: [
                                {
                                    value: [graph.radar.data_structure, graph.radar.graph_theory,
                                        graph.radar.dynamic_programming, graph.radar.search,
                                        graph.radar.geometry, graph.radar.string,
                                        graph.radar.math, graph.radar.probability],
                                    symbol: 'circle',
                                    label: {
                                        normal: {
                                            show: true,
                                            formatter: function (params) {
                                                return params.value;
                                            }
                                        }
                                    }
                                }
                            ],
                            itemStyle: {
                                normal: {
                                    normal: {
                                        borderWidth: "2"
                                    }
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: 'white',
                                    opacity: 0.1
                                }
                            }
                        }
                    ]
                };
                pieChart.setOption(pieoption);
                radarChart.setOption(radaroption);
            }
        }
    });
</script>
<footer th:replace="~{fragment/footer :: footer}"></footer>
</body>
</html>